<template>
  <div>
    <ConfigForm
      ref="configForm"
      label-width="auto"
      :form-items="configs"
      :model="formData"
      :rules="configsRules"
      @search="search"
    />
    <el-button @click="submit">添加</el-button>
  </div>
</template>
<script setup lang="ts">
import ConfigForm from '@/components/configForm/index.vue'
import type { FormRules } from 'element-plus'
const configForm = ref()
const formData = ref({
  myText: '',
  myInput: '',
  mySelect: '',
  myRadio: '',
  myCheckbox: [''],
  mySwitch: false,
  myDate: '',
  startTime: '',
  endTime: '',
  myVirtualSelect: []
})
// 表单组件
const configs = computed(() => {
  const items = [
    {
      label: 'Text信息',
      key: 'myText',
      type: 'text',
      mutable: true,
      attrs: {
        class: 'myText'
      },
      vIf: formData.value.myRadio === '2'
    },
    {
      label: '输入框',
      key: 'myInput',
      type: 'input',
      attrs: {
        class: 'myInput'
      },
      props: {
        type: 'textarea',
        placeholder: '请输入输入框',
        onInput: (e:string) => {
          console.log(e)
        },
        onChange: (e:string) => {
          console.log('onChange', e)
        }
      }
    },
    {
      label: '下拉框',
      key: 'mySelect',
      type: 'select',
      mutable: true,
      attrs: {
        class: 'mySelect'
      },
      props: {
        onChange:(e:string) => {
          console.log(e)
        }
      },
      ext: {
        options: [
          { name: '下拉框1', id: '1' },
          { name: '下拉框2', id: '2' }
        ],
        resetKeys: { label : 'name', value: 'id' }
      }
    },
    {
      label: '单选框',
      key: 'myRadio',
      type: 'radio',
      mutable: true,
      attrs: {
        class: 'myRadio'
      },
      ext: {
        options: [
          { value: '1', label: '单选框1' },
          { value: '2', label: '单选框2' }
        ]
      }
    },
    {
      label: '多选框',
      key: 'myCheckbox',
      type: 'checkbox',
      mutable: true,
      attrs: {
        class: 'myCheckbox'
      },
      ext: {
        options: [
          { value: '1', label: '多选框1' },
          { value: '2', label: '多选框2' },
          { value: '3', label: '多选框3' }
        ],
        isAll: { value: '0', label:'全部' }
      }
    },
    {
      label: '按钮',
      key: 'mySwitch',
      type: 'switch',
      mutable: true,
      attrs: {
        class: 'mySwitch'
      },
      props: {
        'active-text': '开始',
        'inactive-text': '结束'
      }
    },
    {
      label: '常规日期',
      type: 'date',
      key: 'myDate',
      mutable: true,
      attrs: {
        class: 'myDate'
      },
      props: {
        placeholder: '请输入日期',
        format: 'YYYY-MM-DD',
        valueFormat: 'YYYY-MM-DD'
      }
    },
    {
      label: '时间范围',
      key: ['startTime', 'endTime'],
      type: 'date',
      mutable: true,
      props: {
        type: 'daterange',
        clearable: true,
        valueFormat: 'YYYY-MM-DD',
        startPlaceholder: '开始时间',
        endPlaceholder: '结束时间'
      }
    },
    {
      label: '虚拟下拉框',
      key: 'myVirtualSelect',
      type: 'virtualSelect',
      mutable: true,
      props: {
        multiple: true,
        filterable: true,
        onChange:(e:string) => {
          console.log(e)
        }
      },
      ext: {
        options: Array.from({ length: 1000 }).map((_, idx) => ({
          name: `Option ${idx + 1}`,
          id: idx
        })),
        resetKeys: { label : 'name', value: 'id' }
      }
    }
  ]
  return items
})
// 校验规则
const configsRules = reactive<FormRules<any>>({
  myPhone: [
    { required: true, message: '手机号码不能为空', trigger: ['blur', 'change'] }
  ]
})
// 提交表单
const submit = (): void => {
  configForm.value.formSubmit().then((callDatas:any) => {
    if (callDatas) {
      console.log('表单提交成功', callDatas.formDatas)
    } else {
      console.log('表单提交失败')
    }
  })
}
const getData = (): void => {
  setTimeout(() => {
    const data = {
      myText: '这是数据',
      myInput: 'test11',
      mySelect: '1',
      myRadio: '1',
      myCheckbox: ['1'],
      mySwitch: true,
      myDate: '2022-12-12',
      startTime: '2022-10-12',
      endTime: '2022-12-12',
      myVirtualSelect: [1, 2]
    }
    formData.value = data
  }, 1000)
}
// 查询
const search = (form: any): void => {
  console.log('🚀 ~ search ~ form:', form.formDatas)
}
// 获取数据
onMounted(() => {
  getData()
})
</script>
